<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		 
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		 
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="js/zhezhao.js"></script>
		<style>
			html,body{
				margin: 0;
				padding: 0;
				background-color: #000000;
			}
			img{
				width: 100%;				
			}
			.header-img{
				font-size: 0;
				
			}
			.content{
				position: relative;
				padding: 0;
				width: 10%;
				float: left;
				box-shadow: #000000;
			}			
			
			.mask{
				position: absolute;
				top:0;
				left: 0;
				height: 100%;
				width: 100%;
				background: rgba(0,0,0,0.5);
				color: #212529;
				line-height: 100%;				
				border-radius: 4px;
				display: none;
				font-family: 30px;	
				text-align: center;
				align-items:center;
				display: -webkit-flex;			
			}
			h3{
				
				font-size: 18px;
				color: #FFFFFF;
				opacity: 0.5;/*元素半透明*/
				text-align: center;
				width: 100%;		
			}
			
			p{
				text-align: center;
				font-size: 15px;				
			}
			.content>.logo{
				text-align: center;
				align-items:center;
				display: -webkit-flex;	
			}	
			
		</style>
	</head>
	<body>
		<div id="header">
			<div class="header-img">
				<div class="content">
					<div class="img-container1">
						<img src="img/图层 2.jpg" />
						<a href="Scarlet Witch.html"><div class="mask"><h3>绯红女巫<br>Scarlet Witch</h3></div></a>
					</div>
				</div>
				<!--<div class="content">
					<div class="img-container2">
						<img src="img/图层 3.jpg" />
						<a href="#"><div class="mask"><h3></h3></div></a>
					</div>
				</div>-->
				<div class="content">
					<div class="img-container3">
						<img src="img/图层 4.jpg" />
						<a href="Hawkeye.html"><div class="mask"><h3>鹰眼<br>Hawkeye</h3></div></a>
					</div>
				</div>
				<div class="content">
					<div class="img-container4">
						<img src="img/图层 5.jpg" />
						<a href="Hulk.html"><div class="mask"><h3>绿巨人<br>Hulk</h3></div></a>
					</div>
				</div>
				<div class="content">
					<div class="img-container5">
						<img src="img/图层 6.jpg" />
						<a href="Iron Man.html"><div class="mask"><h3>钢铁侠<br>Iron Man</h3></div></a>
					</div>
				</div>
				
				<div class="content" style="width: 20%; height: 100%; text-align: center;">
					<div class="logo" >				
						<img src="img/火狐截图_2018-12-03T12-19-00.926Z.png" style="margin-top: 50%;"/>				
					</div>
				</div>
				
				<div class="content">
					<div class="img-container6">
						<img src="img/图层 7.jpg" />
						<a href="Captain America.html"><div class="mask"><h3>美国队长<br>Captain America</h3></div></a>
					</div>
				</div>
				<div class="content">
					<div class="img-container7">
						<img src="img/图层 8.jpg" />
						<a href="Thor.html"><div class="mask"><h3>雷神<br>Thor</h3></div></a>
					</div>
				</div>
				<div class="content">
					<div class="img-container8">
						<img src="img/图层 9.jpg"/>
						<a href="Black Widow.html"><div class="mask"><h3>黑寡妇<br>Black Widow</h3></div></a>
					</div>
				</div>
				<div class="content">
					<div class="img-container9">
						<img src="img/图层 10.jpg" />
						<a href="Quicksilver.html"><div class="mask"><h3>快银<br>Quicksilver</h3></div></a>
					</div>
				</div>
				<!--<div class="content">
					<div class="img-container9">
						<img src="img/图层 10.jpg" />
						<a href="#"><div class="mask"><h3>绯红女巫<br>Scarlet Witch</h3></div></a>
					</div>
				</div>-->
			</div>
		</div>
		
		<div class="jianjie">
			<br />

			<p>一股突如其来的强大邪恶势力对地球造成致命威胁，没有任何一个超级英雄能够单独抵挡。</p>
			<p>长期致力于保护全球安危的神盾局感到措手不及，其指挥官“独眼侠”尼克·弗瑞（塞缪尔·杰克逊 饰）意识到他必须创建一个“史上最强”的联盟组织，云集各方超级英雄一起发威，</p>
			<p>才能拯救世界于水深火热，抵御黑暗势力的侵袭。</p>
			<p>于是由六大超级英雄——钢铁侠、美国队长、雷神、绿巨人、黑寡妇和鹰眼侠组成的 “复仇者联盟”应运而生。</p>
			
		</div>
	</body>
</html>
